<template>
  <div id="checkreportDiv">
    <Breadcrumb content="报告查询" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-form :data="searchForm" class="searchform form-input-m">
            <vxe-form-item title="申请日期[起]">
              <template #default="{ data }">
                <el-date-picker v-model="data.reqTimeBegin" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" placeholder="申请日期[起]" :shortcuts="shortcuts" />
              </template>
            </vxe-form-item>
            <vxe-form-item title="申请日期[止]">
              <template #default="{ data }">
                <el-date-picker v-model="data.reqTimeEnd" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" placeholder="申请日期[止]" :shortcuts="shortcuts" />
              </template>
            </vxe-form-item>
            <vxe-form-item title="送检单位">
              <vxe-select v-model="searchForm.companyCode" :filterable="true" @change="companyCodeChangeEvent" clearable transfer>
                <vxe-option v-for="orderSObj in inspectCompanyList" :key="orderSObj.id" :value="orderSObj.companyCode" :label="orderSObj.companyName"></vxe-option>
              </vxe-select>
            </vxe-form-item>
            <vxe-form-item title="样本条码">
              <vxe-input v-model="searchForm.reqNo" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findReqMainList" @keyup="keyupEnter" @search-click="findReqMainList()"></vxe-input>
            </vxe-form-item>
            <vxe-form-item>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="mLoading" @click="findReqMainList"></vxe-button>
            </vxe-form-item>
          </vxe-form>
        </template>
      </vxe-toolbar>
      <Splitpanes>
        <Pane size="45">
          <div class="tableBox">
            <vxe-table ref="reqMainTableRef" :data="reqMainList" :loading="mLoading" @current-change="reqMainRowClick" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column type="checkbox" width="30" fixed="left" align="center"></vxe-column>
              <vxe-column field="reqNo" title="样本条码" width="150"> </vxe-column>
              <vxe-column field="stateNa" title="状态" width="80"></vxe-column>
              <vxe-column field="inspectCompanyName" title="送检单位" width="100"></vxe-column>
              <vxe-column field="patNo" title="病人代号" width="100"></vxe-column>
              <vxe-column field="patNa" title="姓名" width="100"></vxe-column>
              <vxe-column field="sexNa" title="性别" width="100"></vxe-column>
              <vxe-column field="ageStr" title="年龄" width="100"></vxe-column>
              <vxe-column field="sampleTypeNa" title="标本类型" width="100"></vxe-column>
              <vxe-column field="reqDeptNa" title="科室" width="100"></vxe-column>
              <vxe-column field="bedNo" title="床号" width="100"></vxe-column>
              <vxe-column field="reqTime" title="申请时间" width="100"></vxe-column>
              <vxe-column field="reqDoctorNa" title="申请医师" width="100"></vxe-column>
              <vxe-column field="samplingTime" title="采样时间" width="100"></vxe-column>
              <vxe-column field="samplingDoctorNa" title="采样医师" width="100"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="55">
          <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="申请信息" name="first">
              <Splitpanes>
                <Pane size="40">
                  <div style="height: calc(100% - 30px - 75px)" class="padding-lr-xs">
                    <el-scrollbar style="height: calc(100%)">
                      <vxe-form :data="reqMainForm" ref="wlconfigpatsettingForm" class-name="form-pat-info margin-bottom form-size-auto" className="" title-align="left" title-width="60">
                        <vxe-form-item title="样本条码" span="24" field="reqNo">
                          <template #default="{ data }">
                            <vxe-input ref="reqNo" v-model="data.reqNo" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="送检单位" span="24" field="patType">
                          <template #default="{ data }">
                            <vxe-input ref="inspectCompanyName" v-model="data.inspectCompanyName" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="病人代号" span="24" field="reqNo">
                          <template #default="{ data }">
                            <vxe-input ref="patNo" v-model="data.patNo" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="病人类型" span="24" field="patType">
                          <template #default="{ data }">
                            <vxe-input ref="patTypeNa" v-model="data.patTypeNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="姓名" span="24" field="reqNo">
                          <template #default="{ data }">
                            <vxe-input v-model="data.patNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="性别" span="24" field="sex">
                          <template #default="{ data }">
                            <vxe-input v-model="data.sexNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="出生日期" span="24" field="birthDay">
                          <template #default="{ data }">
                            <vxe-input v-model="data.birthDay" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="年龄" span="24" field="sex">
                          <template #default="{ data }">
                            <AgeComp class="enterNextInputFlag" :ageObj="{ age: data.age, ageUnit: data.ageUnit }" :isDisabled="calcIsDisabled()" />
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="联系电话" span="24" field="telNo">
                          <template #default="{ data }">
                            <vxe-input v-model="data.telNo" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="证件号码" span="24" field="idNo">
                          <template #default="{ data }">
                            <vxe-input v-model="data.idNo" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="标本类型" span="24" field="sampleType">
                          <template #default="{ data }">
                            <vxe-input v-model="data.sampleTypeNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="检验目的" span="24" field="reqPurpose">
                          <template #default="{ data }">
                            <vxe-textarea v-model="data.reqPurpose" :disabled="calcIsDisabled()"></vxe-textarea>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="科室" span="24" field="reqDept">
                          <template #default="{ data }">
                            <vxe-input v-model="data.reqDeptNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="床号" span="24" field="bedNo">
                          <template #default="{ data }">
                            <vxe-input v-model="data.bedNo" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="申请时间" span="24" field="reqTime">
                          <template #default="{ data }">
                            <vxe-input v-model="data.reqTime" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="申请医师" span="24" field="reqDoctor">
                          <template #default="{ data }">
                            <vxe-input v-model="data.reqDoctorNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="采样时间" span="24" field="samplingTime">
                          <template #default="{ data }">
                            <vxe-input v-model="data.samplingTime" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>
                        <vxe-form-item title="采样医师" span="24" field="samplingDoctor">
                          <template #default="{ data }">
                            <vxe-input v-model="data.samplingDoctorNa" :disabled="calcIsDisabled()"></vxe-input>
                          </template>
                        </vxe-form-item>

                      </vxe-form>
                    </el-scrollbar>
                  </div>
                </Pane>
                <Pane size="60">
                  <div class="tableBoBox">
                    <vxe-table ref="reqDetailTableRef" :data="reqDetailList" :loading="dLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
                      <vxe-column type="seq" width="24" fixed="left"></vxe-column>
                      <vxe-column field="feeCode" title="申请项目代号" width="90"></vxe-column>
                      <vxe-column field="feeName" title="收费项目名称" min-width="120"></vxe-column>
                      <vxe-column field="price" title="单价" width="100"></vxe-column>
                      <vxe-column field="amount" title="数量" width="100"></vxe-column>
                      <vxe-column field="costs" title="金额" width="100"></vxe-column>
                    </vxe-table>
                  </div>
                </Pane>
              </Splitpanes>
            </el-tab-pane>
            <el-tab-pane label="检验结果" name="second">
              <div class="tableMoSaBox">
                <vxe-table ref="reqResultTableRef" :data="reqResultList" :loading="dLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
                  <vxe-column type="seq" width="24" fixed="left"></vxe-column>
                  <vxe-column field="rptGroupName" title="报告单元" width="150"></vxe-column>
                  <vxe-column field="sampleNo" title="标本号" width="90"></vxe-column>

                  <vxe-column field="itemNo" title="项目代号" width="90"></vxe-column>
                  <vxe-column field="itemNa" title="项目名称" min-width="120"></vxe-column>
                  <vxe-column field="testResult" title="检验结果" min-width="120"></vxe-column>
                  <vxe-column field="ref" title="参考范围" min-width="120"></vxe-column>

                  <vxe-column field="feeCode" title="申请项目代号" width="90"></vxe-column>
                  <vxe-column field="feeName" title="申请项目名称" min-width="120"></vxe-column>

                </vxe-table>
              </div>
            </el-tab-pane>
          </el-tabs>

        </Pane>
      </Splitpanes>
    </div>
  </div>

</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted, ObjectDirective } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { IsEmpty, formatDateTime, autoIncrementNumber, sortByField } from '@/utils/common';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { VXETable, VxeFormPropTypes, VxeFormInstance } from 'vxe-table';
import AgeComp from '@/components/AgeComp.vue';

let store = AppStore();
const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    }
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return date;
    }
  }
];

let searchForm = reactive({
  searchValue: '',
  companyCode: '',
  reqNo: '',
  state: '100',
  states: '100,105',
  reqTimeBegin: formatDateTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), 'yyyy-MM-dd 00:00:00'),
  reqTimeEnd: formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59')
});

let reqMainForm = reactive({
  id: null,
  reqNo: '',
  state: '',
  stateNa: '',
  inspectCompany: '',
  inspectCompanyName: '',
  checkCompany: '',
  checkCompanyName: '',
  patType: '',
  patTypeNa: '',
  patNo: '',
  patNa: '',
  sex: '',
  sexNa: '',
  birthDay: '',
  age: null,
  ageUnit: '',
  ageStr: '',
  telNo: '',
  sampleType: '',
  sampleTypeNa: '',
  idNo: '',
  reqPurpose: '',
  bedNo: '',
  reqDept: '',
  reqDeptNa: '',
  reqDoctor: '',
  reqDoctorNa: '',
  reqTime: '',
  samplingDoctor: '',
  samplingDoctorNa: '',
  samplingTime: '',
  orgId: ''
});

let reqMainList: any = reactive([]);
let mLoading = ref(false); //刷新加载状态
let dLoading = ref(false); //刷新加载状态

let sltReqMain: any = reactive({});
let inspectCompanyList: any = reactive([]);
let reqResultList: any = reactive([]);
let reqDetailList: any = reactive([]);

let activeName = ref('first');

// 页面加载时更新报告单元/字典
onMounted(async () => {
  findInspectCompanyList();
  await findReqMainList();
});

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findReqMainList();
  }
}

function companyCodeChangeEvent() {
  findReqMainList();
}

async function findReqMainList() {
  mLoading.value = true;
  reqMainList.length = 0; //放入数据前清空数据
  const url = '/lab/reqMain/findReqMainList';
  await proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchForm.searchValue,
        companyCode: searchForm.companyCode,
        reqNo: searchForm.reqNo,
        states: searchForm.states,
        reqTimeBegin: searchForm.reqTimeBegin,
        reqTimeEnd: searchForm.reqTimeEnd
      }
    })
    .then((res: any) => {
      reqMainList.push(...res.data);
      if (reqMainList.length == 0) {
        sltReqMain = {};
        reqResultList.length = 0;
        reqDetailList.length = 0;
        clearReqMainForm();
      } else {
        const kn = reqMainList.find((k: any) => k.id == sltReqMain.id);
        if (IsEmpty(kn)) {
          reqMainRowClick({ row: reqMainList[0] }); //默认选中第一条数据
        } else {
          reqMainRowClick({ row: kn }); //默认选中第一条数据
        }
      }

      mLoading.value = false;
    })
    .catch((err: any) => {
      mLoading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function reqMainRowClick({ row }: any) {
  if (IsEmpty(row)) {
    sltReqMain = {};
    clearReqMainForm();
    reqResultList.length = 0;
  } else {
    (proxy.$refs.reqMainTableRef as any).setCurrentRow(row);
    sltReqMain = row;
    setReqMainForm(row);
    if (activeName.value == 'first') {
      findReqDetailList();
    } else if (activeName.value == 'second') {
      findReqResultList();
    }
  }
}
function tabHandleClick(tab) {
  if (tab.props.name == 'first') {
    findReqDetailList();
  } else if (tab.props.name == 'second') {
    findReqResultList();
  }
}
function findReqDetailList() {
  reqDetailList.length = 0;
  dLoading.value = true;
  const url = '/api/reqdetail/getDetailByBarcode';
  proxy.$http
    .get(url, { params: { reqNo: sltReqMain.reqNo } })
    .then((res: any) => {
      reqDetailList.length = 0;
      reqDetailList.push(...res.data);

      dLoading.value = false;
    })
    .catch((err: any) => {
      dLoading.value = false;
      proxy.$alert(err, '提示');
    });
}

function findReqResultList() {
  reqResultList.length = 0;
  dLoading.value = true;
  const url = '/lab/reqResult/getReqResultList';
  proxy.$http
    .get(url, { params: { reqNo: sltReqMain.reqNo } })
    .then((res: any) => {
      reqResultList.length = 0;
      reqResultList.push(...res.data);

      dLoading.value = false;
    })
    .catch((err: any) => {
      dLoading.value = false;
      proxy.$alert(err, '提示');
    });
}
async function findInspectCompanyList() {
  const url = '/lab/inspectCompany/findInspectCompanyList';
  await proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      if (res.status.code === 1) {
        inspectCompanyList.push(...res.data);
      }
    })
    .catch((err: any) => {
      // VxeMessage('获取机构列表失败',VxeNotifyType.error)
    });
}

function setReqMainForm(row: any) {
  Object.assign(reqMainForm, row);
}
function clearReqMainForm() {
  for (const key in reqMainForm) {
    if (Object.prototype.hasOwnProperty.call(reqMainForm, key)) {
      if (key === 'labReqdetailList') {
        reqMainForm[key] = [];
      } else {
        reqMainForm[key] = '';
      }
    }
  }
}

function calcIsDisabled() {
  return true;
}
</script>

<style lang="scss" scoped>
#checkreportDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 100px);
    // 右侧保存按钮
    .saveBtn {
      //float: right;
      margin: 0px 30px;
    }
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 机构表格
    :deep(.vxe-table--render-default) {
      height: 100%;
    }
    :deep(.vxe-table--render-wrapper) {
      height: 100%;
      background-color: $base-white;
    }
    .tableBox {
      height: calc(100%);
    }
    .tableBoBox {
      height: calc(100% - 2%);
    }

    .tableMoSaBox {
      height: calc(100%);
    }

    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }
    .form-input-m {
      .el-input {
        width: 150px;
      }

      .vxe-input {
        width: 150px !important;
      }
    }
  }

  .el-tabs {
    height: 100%;
    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      padding: 0;
      .el-tab-pane {
        height: 100%;
      }
      #pane-first {
        padding: 15px;
      }
    }
  }
}

:deep(.vxe-form) {
  padding-left: 1px;

  .vxe-input--inner,
  .vxe-textarea--inner,
  .vxe-button {
    background-color: transparent;
  }

  .vxe-input--inner[disabled] {
    color: #000;
  }
}
</style>